<template>
    <div class="list-page">
        <div class="search-box">
            <el-input placeholder="输入关键字进行过滤" v-model="filterText" class="input-search">
            </el-input>
            <i class="el-icon-search"></i>
        </div>

        <section class="ag-scrollbar">
            <el-tree :data="treeData" show-checkbox default-expand-all node-key="id" ref="tree" highlight-current
                :props="defaultProps" :filter-node-method="filterNode" @check-change="handleCheckChange">
                <span class="custom-tree-node" slot-scope="{ node, data }">
                    <span :title="node.label"><i v-if="data.children" class="icon-folder"></i><i v-if="!data.children"
                            class="icon-list"></i>{{ node.label }}</span>
                </span>
            </el-tree>
        </section>
    </div>
</template>
<script>
    var axios = agcim.net.http;
    import net from "@/views/js/net/serverData4Config";
    import {
        restructTreeData
    } from "./js/index";
    export default {
        props: {
            allKeys: {
                type: Array
            }
        },
        data() {
            return {
                defaultProps: {
                    children: 'children',
                    label: 'title'
                },
                checkedKeys: [],
                filterText: '',
                treeData: [],
            };
        },
        mounted() {
            this.getProjectInfo();
        },
        methods: {
            async getProjectInfo() {
                let res = await axios.get(
                    agcim.net.apiPath.project_getProjectInfo,{ params:{ version: CIM_VERSION } }
                );
                if (res.success) {
                    this.projectArr = res.content;
                    this.projectName = this.projectArr[0].name;
                    this.buildLayerTree();
                }
            },
            /**创建图层树 */
            async buildLayerTree() {
                let vm = this;
                this.projectName = CIM_LAYERTREE_NAME;
                let p = {
                    projectName: this.projectName,
                    emptydir: true,
                };
                let res = await net.getLayerTreeData(p);
                var arr = res.content[0].children;
                vm.treeData = restructTreeData(arr, "", []).data;
            },
            handleCheckChange(data, state, nodeState2) {
                if (data.dirLayerId) { //只对图层操作
                    let o = {
                        data: data,
                        state: state
                    }
                    this.$emit('appendLayer', o);
                }
            },
            filterNode(value, data) {
                if (!value) return true;
                return data.title.indexOf(value) !== -1;
            },
            setCheckedKeys(keys) {
                this.$refs.tree.setCheckedKeys(keys);
            }
        },
        watch: {
            filterText(val) {
                this.$refs.tree.filter(val);
            },
            allKeys(val) {
                this.setCheckedKeys(val);
            }
        },
    };
</script>
<style scoped>
    .list-page {
        padding: 10px 0 10px 16px;
        border-right: 1px solid #919499;
    }

    .list-page .ag-scrollbar {
        max-height: 390px;
        width: 330px;
    }

    .list-page .el-checkbox {
        display: block;
        color: #fff;
        line-height: 30px;
    }

    .search-box {
        position: relative;
        width: calc(100% - 16px);
        margin-bottom: 7px;
    }

    .search-box ::v-deep .el-input__inner {
        height: 30px;
        line-height: 30px;
        background: rgb(255, 255, 255, 0.9);
    }

    .search-box .el-icon-search {
        position: absolute;
        top: 6px;
        right: 10px;
        font-size: 16px;
        color: #A8AEB7;
    }

    .btm-box {
        text-align: right;
    }

    .icon-folder {
        display: inline-block;
        width: 14px;
        height: 14px;
        background: url(./img/icon-folder.png) no-repeat;
        background-size: 100%;
        margin-right: 2px;
        vertical-align: text-bottom;
    }

    .icon-list {
        display: inline-block;
        width: 14px;
        height: 14px;
        background: url(./img/icon-list.png) no-repeat;
        background-size: 100%;
        margin-right: 2px;
        vertical-align: text-bottom;
    }

    .el-tree {
        position: relative;
        cursor: default;
        background: transparent;
        color: #fff;
    }

    ::v-deep .el-tree-node__expand-icon {
        font-size: 14px;
    }

    ::v-deep .el-checkbox__inner {
        background-color: transparent;
    }

    ::v-deep .el-tree-node__content {
        position: relative;
        height: 32px;
    }

    ::v-deep .el-tree-node .el-tree-node__content:hover {
        background: rgba(255, 255, 255, 0.2);
    }

    ::v-deep .el-tree-node:focus>.el-tree-node__content {
        background: rgba(255, 255, 255, 0.2);
    }

    ::v-deep .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
        background: rgba(255, 255, 255, 0.2);
    }

    .custom-tree-node{
        width: 80%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
</style>